<template>
  <div class="aboutUs">
    <div class="banner">
      <img class="bannner-img" src="../assets/banner/aboutUs/关于我们.jpg" alt="">
    </div>
    <div class="tabs">
      <el-tabs class="tabs" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="item in tabs" :key="item.code" :label="item.label" :name="item.code"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="content">
      <h3>{{getTitle()}}</h3>
      <el-card  shadow="never">
        <div :hidden="!(activeName=='1')" class="div-center ">
          <div class="div-center_about">
            <div class="div-left">
              <img src="../assets/aboutUs/gsjj.png" class="img-gsjj"/>
            </div>
            <div class="div-right">
              <p v-for="(item,index) in texttotal" :key="index">{{item.text}}</p>
            </div>
          </div>
        </div>
        <div :hidden="!(activeName=='2')" class="div-center">
          <img src="../assets/aboutUs/fzlc.png" class="img-gsjj"/>
        </div>
        <div :hidden="!(activeName=='3')" class="div-center">
          <img src="../assets/aboutUs/yfcx.jpg" class="img-gsjj"/>
        </div>
        <div :hidden="!(activeName=='4')" class="div-center">
          <img src="../assets/aboutUs/qywh.png" class="img-gsjj"/>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
    import Banner from "../components/Banner";
    export default {
        name: "AboutUs",
        data(){
            return{
                texttotal:[
                    {
                        text:`哈工大机器人集团（HRG）成立于2014年12月, 以政产学研深度融合的方式，推进机器人及相关智能装备领域
的技术研发服务，推动区域创新体系建设和地方产业转型升级，构建了面向机器人及相关智能装备领域的研发机构
集群。`
                    },
                    {
                        text:`HRG秉承“聚天下力，争世界先”的发展理念，依托研发机构集群的建设，通过联合研发、委托研发、自主研
发，构建面向产业的创新研发服务体系。目前，HRG已拥有一支由院士、长江学者、万人计划等专家领衔、规模逾
1200人的创新创业人才队伍，建成了涵盖全链条、全要素的技术创新体系；已申报专利2200余项，其中授权专利
1300余项，每年新增专利300余项；已研发和推出30余类、200余种产品；在智慧工厂、工业机器人、服务机器
人、特种机器人、文旅机器人、医养康助机器人以及产教融合等方面形成了产业集聚和协同共生的发展态势。`
                    },
                    {
                        text:`哈工科讯（沈阳）物流装备有限公司，按照集团及控股股东中安星瑞航空科技有限公司整体战略发展要求，于
2022年完成股改，团队具有近10年从事智慧物流相关业务的行业经验，作为专业的智慧物流系统解决方案提供商，
专注于工业物流搬运及存储领域，团队以国际先进的物流理念、前沿的技术为导向，致力于成为一家及设计规划、
工程管理、软件开发、项目维保为一体的工业物流科技公司。团队成立以来，业绩斐然，为众多客户提供实现物料
出入库、存储、搬运、配送等管理过程的自动化、信息化和智能一体化布局。`
                    }
                ],
                activeName: '1',
                tabs:[
                    {
                        label:"公司简介",
                        code:"1"
                    },{
                        label:"发展历程",
                        code:"2"
                    },{
                        label:"业务研发",
                        code:"3"
                    },{
                        label:"企业文化",
                        code:"4"
                    }
                ],
            }
        },
        watch: {
            '$route':'setActiceName'
        },
        methods: {
            handleClick(tab, event) {

            },
            setActiceName(){
                var url=window.location.href;
                if (url.indexOf("?")>-1){
                    var active=url.split("?")[1];
                    this.activeName=active;
                }
            },
            setBanners(){
                //设置轮播图
                this.$store.commit("setBanners",this.banners);
            },
            getTitle(){
                switch (this.activeName) {
                    case "1": return '公司简介'
                    case "2": return '发展历程'
                    case "3": return '业务研发'
                    case '4': return '企业文化'
                }
            }
        },
        mounted(){
            this.setBanners();
            this.setActiceName();
        },
        components:{
            Banner,
        }
    }
</script>

<style scoped>

  .aboutUs{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    /* background-color: yellow; */
  }
  .banner{
    width: 100%;
    height: 30%;
    /* border: 1px solid red; */
    overflow: hidden;
  }
  .bannner-img {
    width: 100%;
    height: 100%;
    display: block;
    /* border: 1px solid blue; */
  }
  .tabs{
    font-size: 30px !important;
    padding-left: 1%;
    padding-right: 1%;
    margin: 0;
    background-color: #ffffff;
  }
  /deep/ .el-tabs__item{
    font-size: 16px !important;
  }
  .content{
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: 100%;
  }
  .div-center{
    width: 100%;
    height: 100%;
  }
  .div-center_about{
    width: 100%;
    height: 100%;
    display: flex;
    /* border: 1px solid red; */
  }
  .div-left{
    width: 50%;
    height: 100%;
    /* display: flex; */
    padding: 2%;
    /* margin: auto 0; */
    /* padding:15% auto ; */
    /* padding-top: 15%;
    padding-bottom:2%;
    padding-right: 2%; */
    /* border: 1px solid blue; */
    /* display: inline; */
  }
  .img-gsjj{
    width: 100%;
    height: 100%;
  }
  .div-right{
    width: 50%;
    height: 100%;
    /* border: 1px solid green; */
  }
  .div-right > p {
    font-size: 14px;
    text-indent: 2em;
  }
  h3{
    color: #409EFF;
    padding: 20px;
    margin-left: 7%;
    font-size: 40px;
  }
  @media screen and (max-width: 768px){
    .div-center{
      width: 100%;
      height: 100%;
    }
    .div-center_about{
      width: 100%;
      height: 100%;
      display: inline-block;
    }
    .div-left{
      width: 96%;
      height: 96%;
      padding: 2%;

    }
    .div-right{
      width: 100%;
      height: 100%;
    }
  }
</style>
